<template>
  <view class="content">
    <view class="avatar" style="height: 45rpx">
      <text style="font-size: 32rpx">所在地区</text>
      <view style="display: flex; align-items: center">
        <picker
          :class="{ active: region }"
          style="width: 100%; height: 40rpx; color: rgba(144, 147, 153, 1)"
          mode="region"
          :value="picker"
          @change="pickerChange"
        >
          <text>{{ region ? region : "请选择地区" }}</text>
        </picker>
        <!-- <text 
							    style="font-size: 28rpx; color: rgba(144,147,153,1);"
                                :class="{'active':region}"
							    @click="openPicker()"
							    >{{region?region:'请选择地区'}}</text> -->
        <image
          style="width: 48rpx; height: 48rpx"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png"
        />
      </view>
    </view>
    <view class="avatar" style="height: 45rpx">
      <text style="font-size: 32rpx"
        >搜索地点<text
          style="font-size: 24rpx; color: rgb(144, 147, 153); font-weight: 400"
          >(POI)</text
        ></text
      >
      <input
        type="text"
        v-model="value"
        style="text-align: right"
        placeholder="如红旗街"
      />
    </view>
    <view style="width: 100%; background-color: #fff">
      <button class="botBtn" @click="poiSearch()">搜索门店</button>
    </view>
      <scroll-view @scrolltolower="scrolltolower" scroll-y v-if="poiArr.length>0" style="height: 100%;">
      <radio-group @change="radioChange" style="padding: 0 30rpx">
        <label class="box" v-for="(item, index) in poiArr" :key="index">
          <view class="poiInfo">
            <text style="font-size: 28rpx; color: rgb(48, 49, 51)">{{
              item.name
            }}</text>
            <text style="font-size: 24rpx; color: rgba(144, 147, 153, 1)">{{
              item.address
            }}</text>
          </view>
          <view>
            <radio :value="index" color="rgba(142,84,244,1)" />
          </view>
        </label>
      </radio-group>
    </scroll-view>
  </view>
  <view style="height: 100rpx">
    <view class="bottom">
      <button class="bottom-quxiao" @click="goBack()">取消</button>
      <button class="bottom-queren" @click="queren()">确认</button>
    </view>
  </view>
  <ccInputSelView
    v-on:choseVal="choseValue"
    :lotusAddressData="lotusAddressData"
  ></ccInputSelView>
</template>

<script>
import { httpRequest } from "../../utils/http";
import ccInputSelView from "../../components/components/Winglau14-lotusAddress_1.0.9/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
import amap from "../../components/components/AMapWX_SDK_V1.3.0/amap-wx.130.js";
export default {
  components: {
    ccInputSelView,
  },
  data() {
    return {
      lotusAddressData: {
        visible: false,
        provinceName: "",
        cityName: "",
        townName: "",
      },
      region: "",
      value: "",
      amapPlugin: null,
      key: "020d75b8d85b7d712b77a65cf9256d2a",
      poiArr: [],
      poiObj: {},
      current: 0,
      isShow: false,
      pageNum: 1,
      pageSize: 10,
      picker: [],
    };
  },
  onLoad() {
    this.amapPlugin = new amap.AMapWX({
      key: this.key,
    });
  },
  methods: {
    scrolltolower(e){
      console.log(e);
      console.log('触底');
      this.pageNum++
      this.poiSearch(1)
    },
    pickerChange(e) {
      console.log(e.detail.value);
      this.lotusAddressData.provinceName = e.detail.value[0]; //省
      this.lotusAddressData.cityName = e.detail.value[1]; //市
      this.lotusAddressData.townName = e.detail.value[2]; //区
      this.region = `${e.detail.value[0]} ${e.detail.value[1]} ${e.detail.value[2]}`;
    },
    goBack() {
      uni.navigateBack({ delta: 1 });
    },
    queren() {
    if(!this.poiObj.id)return uni.showToast({title:'请先选择地址',icon:'none'})
      uni.setStorageSync("map", this.poiObj);
      uni.navigateBack({ delta: 1 });
    },
    radioChange: function (evt) {
      console.log(evt);
      // for (let i = 0; i < this.poiArr.length; i++) {
      //     if (i === evt.detail.value) {
      //         this.current = i;
      //         console.log(this.current);
      //         break;
      //     }
      // }
      this.poiObj = this.poiArr[evt.detail.value];
    },
    async poiSearch(a) {
      if(!this.lotusAddressData.cityName) return uni.showToast({title:'请先选择城市',icon:'none'})
      if(!this.value)return uni.showToast({title:"请先输入详细位置",icon:'none'})
      // const res = await httpRequest("/api/address", "POST", {
      //   keyword: this.value,
      //   city: this.lotusAddressData.cityName,
      //   pageNum: this.pageNum,
      //   pageSize: this.pageSize,
      // });
      const res = await uni.request({
        url: 'https://restapi.amap.com/v5/place/text?parameters',
        data: {
          key:this.key,
          keywords:this.value,
          city:this.lotusAddressData.cityName,
          citylimit:true,
          page_num:this.pageNum,
          page_size:25
        },
        header: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        method: 'GET',
      })
      console.log(res.data);
      if(!res.data.pois.length||res.data.count=='1')return uni.showToast({title:'暂无更多搜多结果',icon:'none'})
      if(a==1){
        this.poiArr = [...this.poiArr,...res.data.pois];
      }else{
        this.poiArr = res.data.pois
      }
      
    },
    openPicker() {
      this.lotusAddressData.visible = true;
    },
    choseValue(res) {
      //res数据源包括已选省市区与省市区code
      console.log(res);
      this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
      //res.isChose = 1省市区已选 res.isChose = 0;未选
      if (res.isChose) {
        this.lotusAddressData.provinceName = res.province; //省
        this.lotusAddressData.cityName = res.city; //市
        this.lotusAddressData.townName = res.town; //区
        this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
      }
    },
  },
  computed: {
    processedArray() {
      // 在这里对异步获取到的数组进行处理
      // 返回处理后的数组
      return this.items;
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  background-color: rgb(241, 241, 241);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}

.uni-btn-v {
  width: 100%;
  height: auto;
}

.botBtn {
  width: 90%;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  margin-top: 24rpx;
  background-color: rgba(142, 84, 244, 1);
  color: #fff;
  border-radius: 428rpx;
  font-size: 32rpx;
  margin-bottom: 26rpx;
}
.avatar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 700rpx;
  height: 100rpx;
  padding: 24rpx 30rpx;
  font-size: 28rpx;
  background-color: #fff;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 166rpx;
  padding-top: 10rpx;
  background-color: #fff;
}
.bottom-quxiao {
  width: 336rpx;
  height: 86rpx;
  text-align: center;
  line-height: 88rpx;
  color: rgba(142, 84, 244, 1);
  border: 1px solid rgba(142, 84, 244, 1);
  font-size: 32rpx;
  margin: 0;
}
.bottom-queren {
  width: 336rpx;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  background-color: rgba(142, 84, 244, 1);
  color: #fff;
  font-size: 32rpx;
  margin: 0;
  margin-left: 18rpx;
}
.box {
  width: 686rpx;
  min-height: 134rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  background-color: #fff;
}
.box:first-child {
  margin-top: 30rpx;
}
.poiInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 28rpx;
}
.active {
  color: rgb(69, 70, 74) !important;
}
</style>
